import React from 'react'

import {Row, Col, Radio,  Table, Select,} from 'antd';
import './PurchaseOrderDetail.css'
import {
    DownOutlined,
    FormOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
} from "@ant-design/icons";

const {Option} = Select;
const columns = [
    {
        title: '',
        dataIndex: 'No',
        align: 'center',
    },

    {
        title: '主图',
        dataIndex: 'mainPic',
        align: 'center',

    },
    {
        title: '商品编码',
        dataIndex: 'goodsNo',

    },
    {
        title: '商品名称',
        dataIndex: 'goodsName',
    },
    {
        title: '商品规格',
        dataIndex: 'goodsSpecs',
    },
    {
        title: '数量',
        dataIndex: 'num',
    },

    {
        title: '单位',
        dataIndex: 'unit',
    },

    {
        title: '单价',
        dataIndex: 'goodsOrderPrice',
    },
    {
        title: '金额小计',
        dataIndex: 'countMoney',
    },
    {
        title: '备注',
        dataIndex: 'remarks',
        key: 'remarks',
        align: 'center',

    },
];
const logColumns = [
    {
        title: '公司名称',
        dataIndex: 'companyName',
        align: 'center',

    },
    {
        title: '操作人',
        dataIndex: 'actPerson',
        align: 'center',

    },
    {
        title: '时间',
        dataIndex: 'time',

    },
    {
        title: '操作类别',
        dataIndex: 'actType',
    },
    {
        title: '操作日志',
        dataIndex: 'log',
    },

];
const logTableData = [];
const tableData = [
    {
        key: 0,
        No: '1',
        orderTime: <span style={{cursor: 'pointer'}}>+</span>,
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 1,
        No: '合计',
        orderTime: '',
        num: 0,
        countMoney: '0.00',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },

];
class ReturnOrderDetailItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countMoney: '0.00',
            visible: false,
            orderTypeText: '全部级别',
            selectValue: 1,
            current: '订单详情',
            orderNo: ' DH-O-20200508-405868 ',
            customerName: '小雷家电线厂',
            value: 1,
            logVisible: false,
        }
    }
    clickLog = () => {
        this.setState({
            logVisible: !this.state.logVisible,
        })
        if (this.state.logVisible) {
            //箭头顺时针旋转180度
        } else {
            //箭头逆时针旋转180度
        }
    }
    handleClick = e => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    };
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectValue: value,
        })
    }
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };

    render() {
        let {countMoney,} = {...this.state}
        return (<div style={{ position: 'relative',backgroundColor:'white'}}>
            {/*//订单详情*/}
            <Row >
                <Col span={24}>
                    <Row style={{marginTop: 20}} align={'middle'}>
                        <Col span={17}>
                            <span className={'orderInfo'} style={{fontSize: '1.1rem', color: '#FB7884'}}>待收款确认</span>
                            <span className={'orderInfo'}>退单号：{this.state.orderNo} <span
                                className={'orderWay'}>代下单</span>  </span>
                            <span className={'orderInfo'}>客户名称：{this.state.customerName}【三级代理】</span>
                        </Col>
                        <Col span={7} align={'right'} style={{display: 'flex', justifyContent: 'flex-end'}}>
                            排序：
                            <Radio.Group className={'detailRadio'} onChange={this.onChange} value={this.state.value}>
                                <Radio value={1} className={'sortRadio'} style={{width: '8rem'}} align={'left'}>
                            <span style={{width: '7rem', display: 'flex'}}>
                                <span>
                                   按下单顺序
                                </span>
                            <span className={'orderSort'}>
                                <CaretUpOutlined style={{fontSize: '.5rem'}}/>
                                <CaretDownOutlined style={{fontSize: '.5rem'}}/>
                            </span>
                            </span>

                                </Radio>

                                <Radio value={2}>按商品编码</Radio>

                            </Radio.Group>

                        </Col>


                    </Row>
                    <Row  className={'detailTable'}>
                        <Table
                            bordered
                            pagination={{position: ['none', 'none'],}}
                            columns={columns}
                            dataSource={tableData}
                            className='table'
                        />

                    </Row>
                    <Row className='countMoney' align={'middle'}>
                        <Col span={22} align='right'> 已申请退款,获批退款金额为:</Col>
                        <Col span={2} align='center' style={{color: '#F33333', fontSize: '1.2rem'}}>{countMoney}</Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2}>退款信息</Col>
                        <Col span={22} style={{marginLeft: '-1rem'}}>
                            <span className={'customer'}>联系人 : 雷东宝 </span>
                            <span className={'customer'}>联系电话 : 15659021801</span>
                            <span className={'customer'}>开户银行 :  中国人民银行</span>
                            <span className={'customer'}>开户名称 : 雷东宝</span>
                            <span className={'customer'}>银行账号 : 635345633452888</span>

                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2} style={{paddingRight: '2rem'}}>退货仓库</Col>
                        <Col span={4}>
                            <Select defaultValue="1" style={{marginLeft: '-1rem', width: '100%'}}
                                    onChange={this.handleChange}>
                                <Option value="1">深圳仓</Option>
                                <Option value="2">成都仓</Option>
                                <Option value="3">上海仓</Option>
                            </Select>
                        </Col>
                    </Row>

                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={2}>

                            <span>备注说明</span>
                        </Col>
                        <Col span={20} style={{marginLeft: '-1rem'}}>
                            <FormOutlined style={{marginRight: '.5rem'}}/>
                            无
                        </Col>
                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={24}>
                            <Row>
                                <Col span={2}>
                                    <span>附件信息</span>
                                </Col>
                                <Col span={22}>
                         <span style={{marginLeft: '-1rem'}} className={'fujianBt'}><span
                             className={'iconfont icon-fujian fujian'}/>添加附件</span>
                                    <span>（单个附件最大支持20M，支持格式：PDF、Word、Excel、Txt、JPG、PNG、BMP、GIF、RAR、ZIP）</span>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={2}>

                                </Col>
                                <Col span={22} style={{marginLeft: '-1rem'}}>
                                    暂无附件
                                </Col>

                            </Row>
                        </Col>

                    </Row>
                    <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={3}>
                            <span onClick={this.clickLog}>操作日志 <DownOutlined
                                className={this.state.logVisible ? 'logIconUp' : 'logIconDown'}/></span>
                        </Col>
                    </Row>
                    {this.state.logVisible ? <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                        <Col span={24} className={'logTable'}>
                            <Table
                                bordered
                                pagination={{position: ['none', 'none'],}}
                                columns={logColumns}
                                dataSource={logTableData}
                                className='table'
                            />
                        </Col>
                    </Row> : null}
                </Col>
            </Row>



        </div>);

    }
}

export default ReturnOrderDetailItem
